<div class="white-bg padding-lg padding-top border-radius">
    <div class="flex justify-between">
        <div class="text-title">
            门锁信息
        </div>
        <div>
            <button type="button" class="btn btn-white btn-sm" style="margin-left:10px"  v-on:click="vc.goBack()">
                返回
            </button>
        </div>
    </div>
    <!-- 业主信息 -->
    <div class="margin-top">
        <div class="row" >
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="门锁ID：" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.machineId}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="门锁名称：" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.machineName}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="门锁编号：" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.machineCode}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="厂家名称:" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.factoryName}}</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="剩余电量:" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.charge}}%</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="是否在线:" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{machineDetailInfo.stateName}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="心跳时间" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class=""> {{machineDetailInfo.heartbeatTime}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="添加时间" namespace="machineDetailInfo"></vc:i18n>
                            </label>
                            <label class=""> {{machineDetailInfo.createTime}}</label>
                        </div>
                    </div>
                </div>
                <div v-for="(item,index) in machineDetailInfo.lockMachineParamDtoList">
                    <div class="row" v-if="index % 4 == 0">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">{{item.specName}}：</label>
                                <label class="">{{item.value}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < machineDetailInfo.lockMachineParamDtoList.length-1">
                            <div class="form-group">
                                <label class="col-form-label">{{machineDetailInfo.lockMachineParamDtoList[index+1].specName}}：</label>
                                <label class="">{{machineDetailInfo.lockMachineParamDtoList[index+1].value}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < machineDetailInfo.lockMachineParamDtoList.length-2">
                            <div class="form-group">
                                <label class="col-form-label">{{machineDetailInfo.lockMachineParamDtoList[index+2].specName}}：</label>
                                <label class="">{{machineDetailInfo.lockMachineParamDtoList[index+2].value}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < machineDetailInfo.lockMachineParamDtoList.length-3">
                            <div class="form-group">
                                <label class="col-form-label">{{machineDetailInfo.lockMachineParamDtoList[index+3].specName}}：</label>
                                <label class="">{{machineDetailInfo.lockMachineParamDtoList[index+3].value}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="vc-line-primary margin-top"></div>
    <div class="margin-top-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:machineDetailInfo._currentTab == 'machineDetailRoom'}" v-on:click="changeTab('machineDetailRoom')">
                    <vc:i18n name="房屋信息" namespace="machineDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:machineDetailInfo._currentTab == 'machineDetailLockPerson'}" v-on:click="changeTab('machineDetailLockPerson')">
                    <vc:i18n name="门锁授权" namespace="machineDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:machineDetailInfo._currentTab == 'machineDetailLockLog'}" v-on:click="changeTab('machineDetailLockLog')">
                    <vc:i18n name="下发日志" namespace="machineDetail"></vc:i18n>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:machineDetailInfo._currentTab == 'machineDetailLockInout'}" v-on:click="changeTab('machineDetailLockInout')">
                    <vc:i18n name="开门记录" namespace="machineDetail"></vc:i18n>
                </a>
            </li>
        </ul>
    </div>
    <!--<div v-if="machineDetailInfo._currentTab == 'roomDetailOwner'">
        <vc:create path="property/roomDetailOwner"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'roomDetailCar'">
        <vc:create path="property/roomDetailCar"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'roomDetailAccessControl'">
        <vc:create path="property/roomDetailAccessControl"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'roomDetailAccessControlLog'">
        <vc:create path="property/roomDetailAccessControlLog"></vc:create>
    </div>

    <div v-if="machineDetailInfo._currentTab == 'roomDetailAccessControlInout'">
        <vc:create path="property/roomDetailAccessControlInout"></vc:create>
    </div>
    
    <div v-if="machineDetailInfo._currentTab == 'roomDetailMeter'">
        <vc:create path="property/roomDetailMeter"></vc:create>
    </div>
    
    <div v-if="machineDetailInfo._currentTab == 'roomDetailMeterRecharge'">
        <vc:create path="property/roomDetailMeterRecharge"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'roomDetailLock'">
        <vc:create path="property/roomDetailLock"></vc:create>
    </div>-->
    <div v-if="machineDetailInfo._currentTab == 'machineDetailRoom'">
        <vc:create path="property/machineDetailRoom"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'machineDetailLockPerson'">
        <vc:create path="property/roomDetailLockPerson"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'machineDetailLockLog'">
        <vc:create path="property/roomDetailLockLog"></vc:create>
    </div>
    <div v-if="machineDetailInfo._currentTab == 'machineDetailLockInout'">
        <vc:create path="property/roomDetailLockInout"></vc:create>
    </div>

    
    
</div>